<template>
  <view class="alarm-container">
    <view class="header">
      <text class="title">闹钟</text>
      <view class="add-btn" @click="showAddAlarm = true">
        <text class="add-text">+</text>
      </view>
    </view>

    <!-- 闹钟列表 -->
    <scroll-view class="alarm-list" scroll-y>
      <view v-for="(alarm, index) in alarmList" :key="index" class="alarm-item">
        <view class="alarm-info">
          <view class="alarm-time">{{ alarm.time }}</view>
          <view class="alarm-label">{{ alarm.label }}</view>
          <view class="alarm-repeat">{{ formatRepeat(alarm.repeat) }}</view>
        </view>
        <switch :checked="alarm.enabled" @change="toggleAlarm(index)" color="#667eea" />
        <view class="delete-btn" @click="deleteAlarm(index)">
          <text class="delete-text">删除</text>
        </view>
      </view>
    </scroll-view>

    <!-- 添加闹钟弹窗 -->
    <view v-if="showAddAlarm" class="modal-overlay" @click="showAddAlarm = false">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">添加闹钟</text>
          <view class="close-btn" @click="showAddAlarm = false">×</view>
        </view>
        
        <view class="form-item">
          <text class="form-label">时间</text>
          <picker mode="time" :value="newAlarm.time" @change="onTimeChange">
            <view class="picker-input">{{ newAlarm.time || '选择时间' }}</view>
          </picker>
        </view>
        
        <view class="form-item">
          <text class="form-label">标签</text>
          <input v-model="newAlarm.label" placeholder="闹钟标签" class="text-input" />
        </view>
        
        <view class="form-item">
          <text class="form-label">重复</text>
          <view class="repeat-options">
            <view v-for="(day, index) in weekDays" :key="index" 
                  class="repeat-day" 
                  :class="{ active: newAlarm.repeat.includes(index) }"
                  @click="toggleRepeatDay(index)">
              {{ day }}
            </view>
          </view>
        </view>
        
        <view class="modal-buttons">
          <view class="btn cancel-btn" @click="cancelAdd">取消</view>
          <view class="btn confirm-btn" @click="confirmAdd">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      alarmList: [
        {
          time: '07:00',
          label: '起床',
          repeat: [1, 2, 3, 4, 5],
          enabled: true
        },
        {
          time: '22:00',
          label: '睡觉',
          repeat: [0, 1, 2, 3, 4, 5, 6],
          enabled: false
        }
      ],
      showAddAlarm: false,
      newAlarm: {
        time: '',
        label: '',
        repeat: [],
        enabled: true
      },
      weekDays: ['日', '一', '二', '三', '四', '五', '六']
    }
  },
  
  methods: {
    toggleAlarm(index) {
      this.alarmList[index].enabled = !this.alarmList[index].enabled
      this.saveAlarms()
    },
    
    deleteAlarm(index) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个闹钟吗？',
        success: (res) => {
          if (res.confirm) {
            this.alarmList.splice(index, 1)
            this.saveAlarms()
          }
        }
      })
    },
    
    onTimeChange(e) {
      this.newAlarm.time = e.detail.value
    },
    
    toggleRepeatDay(dayIndex) {
      const index = this.newAlarm.repeat.indexOf(dayIndex)
      if (index > -1) {
        this.newAlarm.repeat.splice(index, 1)
      } else {
        this.newAlarm.repeat.push(dayIndex)
      }
    },
    
    formatRepeat(repeat) {
      if (repeat.length === 7) return '每天'
      if (repeat.length === 0) return '仅一次'
      if (repeat.length === 5 && repeat.every(day => day >= 1 && day <= 5)) return '工作日'
      if (repeat.length === 2 && repeat.includes(0) && repeat.includes(6)) return '周末'
      
      return repeat.map(day => this.weekDays[day]).join(' ')
    },
    
    cancelAdd() {
      this.showAddAlarm = false
      this.resetNewAlarm()
    },
    
    confirmAdd() {
      if (!this.newAlarm.time) {
        uni.showToast({
          title: '请选择时间',
          icon: 'none'
        })
        return
      }
      
      this.alarmList.push({ ...this.newAlarm })
      this.saveAlarms()
      this.showAddAlarm = false
      this.resetNewAlarm()
      
      uni.showToast({
        title: '闹钟添加成功',
        icon: 'success'
      })
    },
    
    resetNewAlarm() {
      this.newAlarm = {
        time: '',
        label: '',
        repeat: [],
        enabled: true
      }
    },
    
    saveAlarms() {
      uni.setStorageSync('alarmList', this.alarmList)
    },
    
    loadAlarms() {
      const saved = uni.getStorageSync('alarmList')
      if (saved) {
        this.alarmList = saved
      }
    }
  },
  
  onLoad() {
    this.loadAlarms()
  }
}
</script>

<style scoped>
.alarm-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40rpx 30rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #ffffff;
}

.add-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1rpx solid rgba(255, 255, 255, 0.3);
}

.add-text {
  font-size: 36rpx;
  color: #ffffff;
  font-weight: bold;
}

.alarm-list {
  height: calc(100vh - 200rpx);
}

.alarm-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10rpx);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.alarm-info {
  flex: 1;
}

.alarm-time {
  font-size: 48rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 10rpx;
}

.alarm-label {
  font-size: 28rpx;
  color: #ffffff;
  opacity: 0.8;
  margin-bottom: 5rpx;
}

.alarm-repeat {
  font-size: 24rpx;
  color: #ffffff;
  opacity: 0.6;
}

.delete-btn {
  margin-left: 20rpx;
  padding: 10rpx 20rpx;
  background: rgba(255, 71, 87, 0.2);
  border-radius: 10rpx;
  border: 1rpx solid rgba(255, 71, 87, 0.3);
}

.delete-text {
  font-size: 24rpx;
  color: #ff4757;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  width: 80%;
  background: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.modal-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

.close-btn {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #999999;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 15rpx;
}

.picker-input {
  padding: 20rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: #333333;
}

.text-input {
  width: 100%;
  padding: 20rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 10rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.repeat-options {
  display: flex;
  gap: 10rpx;
}

.repeat-day {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #666666;
  border: 1rpx solid #e0e0e0;
}

.repeat-day.active {
  background: #667eea;
  color: #ffffff;
  border-color: #667eea;
}

.modal-buttons {
  display: flex;
  gap: 20rpx;
  margin-top: 40rpx;
}

.btn {
  flex: 1;
  padding: 25rpx;
  border-radius: 10rpx;
  text-align: center;
  font-size: 28rpx;
}

.cancel-btn {
  background: #f5f5f5;
  color: #666666;
}

.confirm-btn {
  background: #667eea;
  color: #ffffff;
}
</style>